<template>
	<view class="page" :style="loading ? 'opacity: 0;' : 'opacity: 1;'">
		<!--  v-model="dataList" @query="queryList" -->
		<pageTxt>
			<z-paging ref="paging" :paging-style="{ 'background-color': '#f7f7f7', height: '100%', width: '100%' }">
				<!-- 头部 -->
				<template slot="top">
					<view class="navbar-box">
						<u-navbar title="责任判定" :autoBack="true" :fixed="false"></u-navbar>
					</view>
				</template>
				<view class="add-content ios">
					<u--form labelPosition="top" :model="formData" ref="uForm" labelWidth="auto">
						<view class="form-box">
							<u-form-item labelPosition="top" labelWidth="100%" required label="售后类型划分" borderBottom @click="showSelect('salesTypeShow')">
								<u-input
									:value="formData.problem_type_item.name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择售后类型划分"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="限期整改日期" borderBottom @click="showSelect('deadlineDateShow')">
								<u-input
									:value="formData.deadline_date"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择限期整改日期"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="售后责任判定" borderBottom @click="showSelect('responsiblePartyShow')">
								<u-input
									:value="formData.responsible_party_item.name"
									disabled
									disabledColor="#ffffff"
									placeholder="请选择售后责任判定"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="材料费" borderBottom>
								<u-input v-model="formData.material_cost" type="number" border="none" placeholder="请输入材料费"></u-input>
								<template v-slot:right>
									<view class="unit">元</view>
								</template>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="人工费" borderBottom>
								<u-input v-model="formData.labor_cost" type="number" border="none" placeholder="请输入材料费"></u-input>
								<template v-slot:right>
									<view class="unit">元</view>
								</template>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="施工费" borderBottom>
								<u-input :value="compute" disabled border="none" color="#c8c9cc" disabledColor="#ffffff" placeholder="自动计算"></u-input>
								<template v-slot:right>
									<view class="unit">元</view>
								</template>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" required label="采购订单" borderBottom v-if="asInfo.is_order_goods == 1" @click="showSelect('purchaseShow')">
								<u-input
									:value="formData.product_item.diyName"
									disabled
									disabledColor="#ffffff"
									:placeholder="purchase[0].length == 0 ? '暂无采购订单，请前往添加' : '请选择采购订单'"
									border="none"
									suffixIcon="arrow-right"
								></u-input>
							</u-form-item>
							<u-form-item labelPosition="top" labelWidth="100%" label="备注" borderBottom>
								<u--textarea
									disableDefaultPadding
									v-model="formData.remark"
									border="none"
									placeholder="请输入备注"
									:placeholderStyle="{ fontSize: '13.5px', color: '#BFC4CC' }"
								></u--textarea>
							</u-form-item>

							<u-form-item labelPosition="top" labelWidth="100%" label="维修费用清单">
								<file-upload @afterRead="afterRead" @delete="deletePic"></file-upload>
							</u-form-item>
						</view>
					</u--form>
				</view>
				<view class="footer ios">
					<u-button
						text="提交"
						@click="submit"
						customStyle="width: 702rpx;height: 88rpx;background: #3B75FF;border-radius: 16rpx;font-weight: 500;font-size: 28rpx;color: #FFFFFF;margin:20rpx 24rpx;"
					></u-button>
				</view>
			</z-paging>
		</pageTxt>
		<!-- 售后类型划分 -->
		<u-picker
			:show="salesTypeShow"
			:columns="salesType"
			keyName="name"
			@confirm="confirm($event, 'problem_type_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>

		<!-- 期望上门时间 -->
		<u-calendar :show="deadlineDateShow" mode="single" @confirm="confirm($event, 'deadline_date')" color="#3B75FF" closeOnClickOverlay @close="close"></u-calendar>

		<!-- 获取责任判定 -->
		<u-picker
			:show="responsiblePartyShow"
			:columns="responsibleParty"
			keyName="name"
			@confirm="confirm($event, 'responsible_party_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>

		<!-- 获取采购订单 -->
		<u-picker
			:show="purchaseShow"
			:columns="purchase"
			keyName="diyName"
			@confirm="confirm($event, 'product_item')"
			closeOnClickOverlay
			@close="close"
			@cancel="close"
			confirmColor="#3B75FF"
		></u-picker>

		<!-- 提示语 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
export default {
	data() {
		return {
			loading: false,
			asInfo: {},
			formData: {
				id: '',
				deadline_date: '',
				responsible_party_item: '',
				problem_type_item: '',
				product_item: '',
				material_cost: '',
				labor_cost: '',
				construction_cost: '',
				remark: '',
				cost_file: []
			},

			deadlineDateShow: false,
			salesType: [],
			salesTypeShow: false,
			responsibleParty: [],
			responsiblePartyShow: false,
			purchase: [],
			purchaseShow: false
		};
	},
	computed: {
		compute() {
			return this.getCountMoney();
		}
	},
	onLoad(e) {
		this.formData.id = e.id;

		this.getInfo(e.id);
		this.getList();
	},
	methods: {
		showSelect(type) {
			if (type == 'purchaseShow') {
				if (this.purchase[0].length == 0) return;
			}
			this[type] = true;
		},
		close() {
			this.deadlineDateShow = false;
			this.salesTypeShow = false;
			this.responsiblePartyShow = false;
			this.purchaseShow = false;
		},
		confirm(e, type) {
			console.log(e, type, 'confirm');
			if (type == 'deadline_date') {
				this.formData[type] = e[0];
			} else {
				this.formData[type] = e.value[0];
			}
			this.close();
		},
		getCountMoney() {
			let formData = this.formData;
			let price = '';
			if (formData.material_cost && formData.labor_cost) {
				let val1 = formData.material_cost ? Number(formData.material_cost) : 0;
				let val2 = formData.labor_cost ? Number(formData.labor_cost) : 0;
				price = Math.floor((val1 + val2) * 100) / 100;
			}
			return price;
		},
		afterRead(files) {
			files.map((item) => {
				let obj = {
					path: item.url
				};
				this.formData.cost_file.push(obj);
				console.log(this.formData.cost_file, 'afterRead');
			});
		},
		deletePic(e) {
			console.log(e, 'deletePic');
			this.formData.cost_file.splice(e.index, 1);
		},
		async submit() {
			let formData = this.formData;
			let construction_cost = this.getCountMoney();
			if (!formData.problem_type_item) {
				this.$refs.uToast.show({
					message: '请选择售后类型划分'
				});
				return;
			}
			if (!formData.deadline_date) {
				this.$refs.uToast.show({
					message: '请选择限期整改日期'
				});
				return;
			}
			if (!formData.responsible_party_item) {
				this.$refs.uToast.show({
					message: '请选择售后责任判定'
				});
				return;
			}
			if (construction_cost === '' || isNaN(construction_cost)) {
				this.$refs.uToast.show({
					message: '请输入正确的材料费/人工费'
				});
				return;
			}
			if (this.asInfo.is_order_goods == 1 && !formData.product_item) {
				this.$refs.uToast.show({
					message: '请选择采购订单'
				});
				return;
			}

			uni.showLoading({
				mask: true
			});
			let data = {
				after_sales_id: formData.id,
				deadline_date: formData.deadline_date,
				responsible_party: formData.responsible_party_item.name,
				responsible_party_id: formData.responsible_party_item.id,
				problem_type: formData.problem_type_item.name,
				problem_type_id: formData.problem_type_item.id,
				material_cost: formData.material_cost,
				labor_cost: formData.labor_cost,
				construction_cost,
				remark: formData.remark
			};

			if (this.asInfo.is_order_goods == 1) {
				data.product_id = formData.product_item.id;
			}
			if (formData.cost_file.length > 0) {
				let resImg = await this.$upload(formData.cost_file);
				data.cost_file = resImg.arrResult;
				var res = await this.$hApi.wxResponsibilityDetermination(data);
			} else {
				var res = await this.$hApi.wxResponsibilityDetermination(data);
			}
			console.log(res, 'wxResponsibilityDetermination');
			uni.hideLoading();
			if (res.code == 200) {
				setTimeout(() => {
					var currentPages = getCurrentPages()[getCurrentPages().length - 2]
					if (currentPages) {
						uni.navigateBack({
							delta: 1
						});
					} else {
						uni.reLaunch({
							url: '/pages/index/index'
						});
					}
				}, 500);
			}
			uni.showToast({
				title: res.code == 200 ? '操作成功' : res.message,
				icon: res.code == 200 ? 'success' : 'error'
			});
		},

		// 获取数据
		getInfo(after_sales_id) {
			this.$Apipc
				.newAfterSalesDetails({
					after_sales_id
				})
				.then((res) => {
					console.log(res, '售后详情');
					if (res.code == 200) {
						this.asInfo = res.data;

						if (res.data.is_order_goods == 1) {
							// 获取采购订单列表
							this.$hApi
								.getPurchase({
									page: 1,
									num: 999,
									after_sales_id
								})
								.then((res) => {
									console.log(res, '获取采购订单列表');
									if (res.code == 200) {
										res.data.list.map((item) => {
											item.diyName = `${item.project_name}(${item.supplier_name})`;
										});
										this.purchase = [res.data.list];
										this.formData.product_item = res.data.list[0];
									}
								});
						}
					}
				});
		},
		// 获取列表数据
		getList() {
			// 获取售后类型划分
			this.$hApi
				.getProblemType({
					page: 1,
					num: 999
				})
				.then((res) => {
					console.log(res, '获取售后类型划分');
					if (res.code == 200) {
						this.salesType = [res.data.list];
					}
				});
			// 获取责任判定列表
			this.$hApi
				.getResponsibleParty({
					page: 1,
					num: 999
				})
				.then((res) => {
					console.log(res, '获取责任判定列表');
					if (res.code == 200) {
						this.responsibleParty = [res.data.list];
					}
				});
		}
	}
};
</script>

<style lang="scss" scoped></style>
